<template>
	<view class="week-calendar">
		<!-- 周切换按钮 -->
		<!-- <view class="week-controls">
			<u-button @click="prevWeek">上一周</u-button>
			<text>{{ currentWeekRange }}</text>
			<u-button @click="nextWeek">下一周</u-button>
		</view> -->

		<!-- 周视图 -->
		<swiper :current="currentWeekIndex" @change="handleWeekChange">
			<swiper-item v-for="(week, index) in weeks" :key="index">
				<view class="week-days">
					<view v-for="day in week.days" :key="day.daily"
						:class="{ 'active': day.isSelected, 'today': day.isToday }" @click="selectDay(day)">
						<text>{{ day.dayOfWeek }}</text>
						<view class="daily">{{ day.daily }}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';

	// 当前周索引
	const currentWeekIndex = ref(0);

	// 生成周数据
	const weeks = ref([]);
	const generateWeeks = () => {
		const today = new Date();
		const startOfWeek = new Date(today);
		startOfWeek.setDate(today.getDate() - today.getDay()); // 本周第一天（周日）

		weeks.value = Array.from({
			length: 5
		}, (_, i) => {
			const weekStart = new Date(startOfWeek);
			weekStart.setDate(startOfWeek.getDate() + i * 7); // 每增加一周

			const days = Array.from({
				length: 7
			}, (_, j) => {
				const day = new Date(weekStart);
				day.setDate(weekStart.getDate() + j); // 每增加一天
				return {
					date: day.toISOString().split('T')[0],
					daily: Number(day.toISOString().split('T')[0].split('-')[2]), // 日期（YYYY-MM-DD）
					dayOfWeek: ['M', 'T', 'W', 'T', 'F', 'S', 'S'][j], // 星期几
					// dayOfWeek: ['日', '一', '二', '三', '四', '五', '六'][j], // 星期几
					isToday: day.toDateString() === today.toDateString(), // 是否是今天,
					isSelected: day.toDateString() === today.toDateString()
				};
			});

			return {
				days
			};
		});
	};

	// 当前周日期范围
	// const currentWeekRange = computed(() => {
	// 	if (
	// 		weeks.value.length > 0 &&
	// 		currentWeekIndex.value >= 0 &&
	// 		currentWeekIndex.value < weeks.value.length
	// 	) {
	// 		const start = weeks.value[currentWeekIndex.value].days[0].date;
	// 		const end = weeks.value[currentWeekIndex.value].days[6].date;
	// 		return `${start} - ${end}`;
	// 	}
	// 	return '加载中...';
	// });

	// 切换周
	const handleWeekChange = (e) => {
		currentWeekIndex.value = e.detail.current;
	};

	// 上一周
	const prevWeek = () => {
		if (currentWeekIndex.value > 0) {
			currentWeekIndex.value--;
		}
	};

	// 下一周
	const nextWeek = () => {
		if (currentWeekIndex.value < weeks.value.length - 1) {
			currentWeekIndex.value++;
		}
	};

	// 选择日期
	const selectDay = (selectedDay) => {
		weeks.value = weeks.value.map((week) => {
			return {
				days: week.days.map((day) => {
					return {
						...day,
						isSelected: day.date === selectedDay.date, // 选中当前日期
					};
				}),
			};
		});
		console.log('选中日期:', selectedDay.date);
	};

	// 初始化生成周数据
	onMounted(() => {
		generateWeeks();
	});
</script>
<style lang="scss" scoped>
	.week-calendar {
		height: 160rpx;

		.week-days {
			display: flex;
			justify-content: space-between;
			border-radius: 10rpx;
		}

		.week-days>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10rpx;

			text {
				font-size: 28rpx;
				color: #A6A6A6;
			}

			view {
				width: 48rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				font-size: 26rpx;
				color: #A6A6A6;
				background: #F9F9F9;
				border: 1px solid #F9F9F9;
				border-radius: 30rpx;
				margin-top: 10rpx;
			}
		}

		.week-days>view.today {
			.daily {
				/* 今天样式 */
				border: 1px solid #FED523;
				background-color: #fff;
			}
		}

		.week-days>view.active {
			text {
				color: #121212;
			}

			.daily {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				background: #FED523;
				border: 1px solid #FED523;
			}
		}
	}
</style>